<template>
  <div class="preview-box">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">法人手持身份证</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httphandHeldRequest"
              :file-list="handHeldList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.handHeldUrl"
                :src="merchantForm.handHeldUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.handHeldUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">法人身份证人像面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpCardFrontRequest"
              :file-list="cardFrontList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.cardFrontUrl"
                :src="merchantForm.cardFrontUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.cardFrontUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">法人身份证国徽面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpCardReverseRequest"
              :file-list="cardReverseList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.cardReverseUrl"
                :src="merchantForm.cardReverseUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.cardReverseUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">营业执照照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpRoaLicenseRequest"
              :file-list="roaLicenseFileList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.licensePicUrl"
                :src="merchantForm.licensePicUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.licensePicUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">银行卡正面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpAccountFrontRequest"
              :file-list="accountFrontList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.accountFrontUrl"
                :src="merchantForm.accountFrontUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.accountFrontUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">银行卡反面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpAccountReverseRequest"
              :file-list="accountReverseList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.accountReverseUrl"
                :src="merchantForm.accountReverseUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.accountReverseUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">非法人身份证人像面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpEcardFrontRequest"
              :file-list="ecardFrontList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.ecardFrontUrl"
                :src="merchantForm.ecardFrontUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.ecardFrontUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">非法人身份证国徽面</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpEcardReverseRequest"
              :file-list="ecardReverseList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.ecardReverseUrl"
                :src="merchantForm.ecardReverseUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.ecardReverseUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">开户许可证</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpOpenPermitRequest"
              :file-list="openPermitList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.openPermitUrl"
                :src="merchantForm.openPermitUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.openPermitUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">商户门头照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpmerchantDoorRequest"
              :file-list="merchantDoorList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.merchantDoorUrl"
                :src="merchantForm.merchantDoorUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.merchantDoorUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">内景照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpinteriorRequest"
              :file-list="interiorList"
              :before-upload="beforeUpload">
              <el-image
                style="width: 100%; height: 100%"
                v-if="merchantForm.interiorUrl"
                :src="merchantForm.interiorUrl"
                fit="cover"
                >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.interiorUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="preview-content">
          <span class="preview-text">收银台照片</span>
          <div class="preview-img">
            <el-upload
              class="preview-upload"
              :http-request="httpCheckoutCounterRequest"
              :file-list="checkoutCounterList"
              :before-upload="beforeUpload">
                <el-image
                    style="width: 100%; height: 100%"
                    v-if="merchantForm.checkoutCounterUrl"
                    :src="merchantForm.checkoutCounterUrl"
                    fit="cover"
                    >
                </el-image>
                <i class="el-icon-picture" v-if="!merchantForm.checkoutCounterUrl"></i>
            </el-upload>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import { uploadPrivateUrl } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    merchantForm: Object,
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      accountFrontList: [],
      accountReverseList: [],
      openPermitList: [],
      ecardFrontList: [],
      ecardReverseList: [],
      merchantDoorList: [],
      interiorList: [],
      checkoutCounterList: [],
    };
  },
  created() {},
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 营业执照照片上传 */
    httpRoaLicenseRequest(option) {
      this.merchantForm.licensePic = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.licensePic = res.data.data.name;
        this.merchantForm.licensePicUrl = res.data.data.link;
      });
    },
    /* 法人手持身份证上传 */
    httphandHeldRequest(option) {
      this.merchantForm.handHeld = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.handHeld = res.data.data.name;
        this.merchantForm.handHeldUrl = res.data.data.link;
      });
    },
    /* 法人身份证国徽面上传 */
    httpCardFrontRequest(option) {
      this.merchantForm.cardFront = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.cardFront = res.data.data.name;
        this.merchantForm.cardFrontUrl = res.data.data.link;
      });
    },
    /* 法人身份证人像面上传 */
    httpCardReverseRequest(option) {
      this.merchantForm.cardReverse = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.cardReverse = res.data.data.name;
        this.merchantForm.cardReverseUrl = res.data.data.link;
      });
    },
    /* 银行卡正面上传 */
    httpAccountFrontRequest(option) {
      this.merchantForm.accountFront = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.accountFront = res.data.data.name;
        this.merchantForm.accountFrontUrl = res.data.data.link;
      });
    },
    /* 银行卡反面上传 */
    httpAccountReverseRequest(option) {
      this.merchantForm.accountReverse = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.accountReverse = res.data.data.name;
        this.merchantForm.accountReverseUrl = res.data.data.link;
      });
    },
    /* 开户许可证上传 */
    httpOpenPermitRequest(option) {
      this.merchantForm.openPermit = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.openPermit = res.data.data.name;
        this.merchantForm.openPermitUrl = res.data.data.link;
      });
    },
    /* 非法人身份证国徽面上传 */
    httpEcardFrontRequest(option) {
      this.merchantForm.ecardFront = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.ecardFront = res.data.data.name;
        this.merchantForm.ecardFrontUrl = res.data.data.link;
      });
    },
    /* 非法人身份证人像面上传 */
    httpEcardReverseRequest(option) {
      this.merchantForm.ecardReverse = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.ecardReverse = res.data.data.name;
        this.merchantForm.ecardReverseUrl = res.data.data.link;
      });
    },
    /* 商户门头照片上传 */
    httpmerchantDoorRequest(option) {
      this.merchantForm.merchantDoor = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.merchantDoor = res.data.data.name;
        this.merchantForm.merchantDoorUrl = res.data.data.link;
      });
    },
    /* 内景照片上传 */
    httpinteriorRequest(option) {
      this.merchantForm.interior = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.interior = res.data.data.name;
        this.merchantForm.interiorUrl = res.data.data.link;
      });
    },
    /* 收银台照片上传 */
    httpCheckoutCounterRequest(option) {
      this.merchantForm.checkoutCounter = "";
      uploadPrivateUrl(option.file, option.file.name).then((res) => {
        this.merchantForm.checkoutCounter = res.data.data.name;
        this.merchantForm.checkoutCounterUrl = res.data.data.link;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-upload {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/deep/.el-upload-list {
    display: none;
}

.preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .preview-content {
    flex: 1;
    border-radius: 10px;
    padding: 14px;
    height: auto;
    background: #f2f2f2;
    .preview-text {
      height: 30px;
      line-height: 30px;
    }
    .preview-img {
      border-radius: 10px;
      width: 100%;
      height: 140px;
      background: #ffffff;
    }
    .preview-upload {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 50px;
    }
  }
}
.preview-title {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
  span {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
}
span {
  // display: block;
  font-size: 14px;
  margin: 8px 0;
}
</style>